<template>
  <div class="home h100">
    <header>
      标题
    </header>
    <main>
      <router-view/>
    </main>
    <footer>
      <router-link exact active-class="active" tag="span" to="/home">
            首页
        </router-link>
        <router-link exact active-class="active" tag="span" to="/home/one">
            列表
        </router-link>
        <router-link exact active-class="active" tag="span" to="/home/two">
            我的
        </router-link>
    </footer>
  </div>
</template>

<script>

export default {
}
</script>

<style>
.home {
    display: flex;
    flex-direction:column;
}

header {
    text-align: center;
    line-height: 46px;
}

main {
    flex: 1;
}

footer {
    text-align: center;
    line-height: 46px;
    display: flex;
}

footer span {
    flex: 1;
}
</style>
